<template>
    <a-spin :tip="$t('loadingText')" :spinning="spinning">
        <a-layout :style="{
                height: mainStore().containerHeight - mainStore().headHeight + 'px'
            }">
            <a-layout-header style="height: 60px;">
                <a-form :model="pageRequest" layout="inline" style="margin-left:20px">
                    <a-form-item :label="$t('upperComputer.menuButton.menuName')" name="menuName">
                        <a-input v-model:value="pageRequest.menuName" :maxlength="50" size="small" allow-clear />
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" @click="requestSearch" size="small">{{ $t("common.search") }}</a-button>
                    </a-form-item>
                </a-form>
                <menu-button :baseMenuButton="baseMenuButton" @callFunc="callFunc" />
            </a-layout-header>
            <a-layout-content>
                <a-table rowKey="id" :scroll="{
                        x: 1000 /** x是columns的sum(width)值，且不能小于sum */,
                        y:
                            mainStore().containerHeight -
                            mainStore().headHeight -
                            mainStore().footHeight -
                            115 
                    }" :pagination="false" :data-source="pageResult.items" :rowSelection="rowSelection">
                    <a-table-column data-index="index" :width="100" :title="$t('common.serialNumber')">
                        <template #default="item">
                            <span>
                                {{
                                    item.index +
                                    1 /** 详细说明看columns的slots，在下边。index跟自己定义的要一致。item代表着行数据集合。 */
                                }}
                            </span>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="menuName" :width="160" :title="$t('upperComputer.menuButton.menuName')"
                        ellipsis />
                    <a-table-column data-index="code" :width="160" :title="$t('upperComputer.menuButton.code')" ellipsis />
                    <a-table-column data-index="displayName" :width="100"
                        :title="$t('upperComputer.menuButton.displayName')" ellipsis />
                    <a-table-column data-index="isSplit" :width="100" :title="$t('upperComputer.menuButton.isSplit')"
                        align="center" ellipsis>
                        <template #default="item">
                            <a-tag :color="getIsSplit(item, 0)">
                                {{
                                    getIsSplit(item, 1)
                                        /** 详细说明看columns的slots，在下边。isSplit跟自己定义的要一致。item代表着行数据集合。 */
                                }}
                            </a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="isActive" :width="100" :title="$t('upperComputer.menuButton.isActive')"
                        align="center" ellipsis>
                        <template #default="item">
                            <a-tag :color="getIsActive(item, 0)">
                                {{
                                    getIsActive(item, 1)
                                        /** 详细说明看columns的slots，在下边。isActive跟自己定义的要一致。item代表着行数据集合。 */
                                }}
                            </a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="description" :title="$t('upperComputer.menuButton.description')" ellipsis />
                </a-table>
            </a-layout-content>
            <a-layout-footer :style="{ height: mainStore().footHeight + 'px' }">
                <pagination :pageRequest="pageRequest" :pageResult="pageResult" @callFunc="callFunc('search')" />
            </a-layout-footer>
        </a-layout>
    </a-spin>

    <a-modal :title="$t('menuButton.' + (currentRow ? 'put' : 'post'))" centered :visible="addOrEditVisible"
        :confirm-loading="spinning" :maskClosable="false" @ok="addOrEditOk" @cancel="addOrEditVisible = false">
        <add-or-edit v-if="addOrEditVisible" ref="addOrEditRef" :id="id" />
    </a-modal>
    <a-modal :title="$t('upperComputer.menuButton.copyButton')" centered :visible="copyButtonVisible"
        :confirm-loading="spinning" :maskClosable="false" @ok="copyButtonOk" @cancel="copyButtonVisible = false">
        <CopyButton v-if="copyButtonVisible" ref="copyButtonRef" :id="id" />
    </a-modal>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import MenuButton from '@/components/menu-button/index.vue';
import Pagination from '@/components/pagination/index.vue';
import AddOrEdit from './add-or-edit.vue';
import CopyButton from './copy-button.vue';
import { MenuButtonResultRequestDto, type MenuButtonResultDto } from '@/models/menu-button';
import { PagedResultDto } from '@/models/paged-result';
import { deleteMenuButtonApi, getMenuButtonsApi } from '@/services/menu-button';
import { mainStore } from '@/store/main';
import { message } from 'ant-design-vue';
import { computed, onMounted, reactive, ref, unref, type Ref } from 'vue';
import { confirm } from '@/utils';

defineProps<{ baseMenuButton: Array<MenuButtonResultDto> }>();

const spinning: Ref<boolean> = ref<boolean>(false);
const pageRequest: MenuButtonResultRequestDto = reactive<MenuButtonResultRequestDto>(new MenuButtonResultRequestDto);
const pageResult: Ref<PagedResultDto<MenuButtonResultDto>> = ref<PagedResultDto<MenuButtonResultDto>>(new PagedResultDto<MenuButtonResultDto>);
const currentRow: Ref<MenuButtonResultDto | null> = ref<MenuButtonResultDto | null>(null);
const selectedRowKeys: Ref<Array<string>> = ref<Array<string>>(new Array<string>);
const rowSelection = computed(() => {
    return {
        type: 'radio',
        selectedRowKeys: unref<Array<string>>(selectedRowKeys),
        onChange: (changableRowKeys: Array<string>, selectedRows: Array<MenuButtonResultDto>) => {
            currentRow.value = selectedRows[0];
            selectedRowKeys.value = changableRowKeys;
        }
    }
});

const id: Ref<number> = ref<number>(0);
const addOrEditVisible: Ref<boolean> = ref<boolean>(false);
const addOrEditRef = ref();
const copyButtonVisible: Ref<boolean> = ref<boolean>(false);
const copyButtonRef = ref();

onMounted(async () => {
    await search();
})

async function requestSearch(): Promise<void> {
    pageRequest.current = 1;
    await search();
}

async function search(): Promise<void> {
    try {
        spinning.value = true;
        pageRequest.skipCount = (pageRequest.current - 1) * pageRequest.maxResultCount;
        pageResult.value = await getMenuButtonsApi(pageRequest);
        currentRow.value = null;
        selectedRowKeys.value = new Array<string>;
    } catch {
    }
    finally {
        spinning.value = false;
    }
}

/**
 * 判断isSplit:item是数据集合，type是类型。0代表着tag的type，1代表着要返回的中英文
 * @param item 
 * @param type 
 */
function getIsSplit(item: any, type: number): string {
    const code: boolean = item.record.isSplit;
    if (!type) {
        return code ? 'success' : 'default';
    }
    return i18n.global.t('upperComputer.menuButton.' + code);
}

/**
 * 判断isActive:item是数据集合，type是类型。0代表着tag的type，1代表着要返回的中英文
 * @param item 
 * @param type 
 */
function getIsActive(item: any, type: number): string {
    const code: boolean = item.record.isActive;
    if (!type) {
        return code ? 'uccess' : 'default';
    }
    return i18n.global.t('upperComputer.menuButton.' + code);
}

function callFunc(funcName: string): void {
    eval(funcName + '()');
}

function post(): void {
    id.value = 0;
    addOrEditVisible.value = true;
}

function put(): void {
    if (!currentRow.value) {
        message.warning(i18n.global.t('common.editOne'));
        return;
    }
    id.value = currentRow.value.id;
    addOrEditVisible.value = true;
}

async function remove(): Promise<void> {
    if (!currentRow.value) {
        message.warning(i18n.global.t('common.delOne'));
        return;
    }
    if (await confirm(i18n.global.t('common.delConfirmTitle'), i18n.global.t('common.delConfirmContent'))) {
        await deleteMenuButtonApi(currentRow.value.id);
        message.success(i18n.global.t('common.delSuccess'));
        await search();
    }
}

function copyButton(): void {
    copyButtonVisible.value = true;
}

async function addOrEditOk(): Promise<void> {
    spinning.value = true;
    const isOk: boolean = await addOrEditRef.value.ok();
    if (isOk) {
        addOrEditVisible.value = false;
        await search();
    }
    spinning.value = false;
}

async function copyButtonOk(): Promise<void> {
    spinning.value = true;
    const isOk: boolean = await copyButtonRef.value.ok();
    if (isOk) {
        copyButtonVisible.value = false;
        await search();
    }
    spinning.value = false;
}
</script>